<template>
  <van-tabbar route
              :safe-area-inset-bottom="true">
    <van-tabbar-item icon="home-o"
                     to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="orders-o"
                     to="/article">文章</van-tabbar-item>
    <van-tabbar-item icon="orders-o"
                     to="/login">登录</van-tabbar-item>
    <van-tabbar-item icon="orders-o"
                     @click.native="logout">退出登录</van-tabbar-item>
  </van-tabbar>

</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Button, Dialog, Swipe, SwipeItem, Tabbar, TabbarItem } from 'vant'
import { UserModule } from '@/store/modules/user'
@Component({
  name: 'FooterTabbar',
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  }
})
export default class extends Vue {
  private logout () {
    Dialog.confirm({
      message: '您确定要退出系统吗',
      title: '确定登出',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      UserModule.LogOut().then(() => {
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      })
    })
  }
}
</script>
